<template>
    <div class="card-info-item">
        <p class="card-info-title">{{title}}</p>
        <p class="card-time">打卡时间 {{time}}</p>
        <p class="card-address">
            <i class="iconfont oa-dizhi icon" v-if="!wifi"></i>
            <i class="iconfont oa-wifi icon" v-else></i>
            {{address?address:(out)?'未在考勤范围':'重庆地理信息中心附近'}}
        </p>
        <p class="card-tags">
            <label class="card-tag warn" v-show="late">迟到</label>
            <label class="card-tag" v-show="!out">外勤</label>
        </p>
    </div>
</template>

<script>
    export default {
        name: "CardInfoItem",
        props: {
            title: {
                default: ""
            },
            time: {
                default: ""
            },
            address: {
                default: ""
            },
            wifi: {
                type:Boolean,
                default: false
            },
            out: {
                default: false
            },
            late: {
                default: false
            }
        }
    }
</script>

<style scoped lang="less">
    .card-info-item {
        display: flex;
        flex-direction: column;
        padding: 8px 10px;
        .card-info-title {
            font-size: 14px;

        }
        .card-time {
            margin-top: 8px;
            font-size: 14px;
            color: #333333;
        }
        .card-tags {
            .card-tag {
                line-height: 20px;
                padding: 0 4px;
                height: 20px;
                font-size: 10px;
                color: white;
                background: #389df1;
                border-radius: 3px;
                &.warn {
                    color: orange;
                }
            }
        }
        .card-address {
            margin-top: 6px;
            font-size: 12px;
            color: #999999;
            .icon {
                font-size: 18px;
                color: #999999;
                margin-right: 8px;
            }
            .card-tag {
                line-height: 20px;
                padding: 0 4px;
                height: 20px;
                font-size: 10px;
                color: white;
                background: #389df1;
                &.warn {
                    color: orange;
                }
            }
        }
    }
</style>